<!--
 * @Author: lg
 * @Date: 2024-02-28 10:03:43
 * @LastEditors: lg
 * @LastEditTime: 2024-02-28 13:36:40
 * @Description: 
 * @FilePath: \stell-mall\src\views\steel-home\components\trends-list\index.vue
-->
<template>
  <ul class="trends-list">
    <div class="title">
      <h3>相关动态</h3>
    </div>
    <el-scrollbar height="435px">
      <li
        v-for="(item, index) in trendsList"
        :key="item"
        class="scrollbar-item"
        @click="handleItemClick"
      >
        <div
          class="num"
          :style="{ color: index <= 2 ? COLOR_ARR[index] : '#E0E0E0' }"
        >
          {{ index + 1 > 9 ? index + 1 : `0${index + 1}` }}
        </div>
        <div class="right">
          <div class="right__top">产业数字化、数字产业化，"傻傻"分不清？</div>
          <div class="right__bottom">2023-06-26</div>
        </div>
      </li>
    </el-scrollbar>
  </ul>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const COLOR_ARR = ['#FA5F5F', '#FFA252', '#FFD674'];
const props = defineProps({
  trendsList: {
    type: Array,
    default: () => 20
  }
});
const handleItemClick=()=>{
  
}
</script>
<style scoped lang="scss">
.trends-list {
  //   margin-left: 18px;
  width: 316px;
  height: 553px;
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #dfe1e6;
  padding: 8px 24px 24px;
  .title {
    border-bottom: 1px solid #dfe1e6;
    // padding-bottom: 16px;
    height: 56px;
    h3 {
      line-height: 56px;
      font-weight: 600;
      font-size: 20px;
      color: #172b4d;
      height: 100%;
      width: 80px;
      border-bottom: 2px solid #1678ff;
    }
  }
  .scrollbar-item {
    height: 90px;
    border-bottom: 1px solid #dfe1e6;
    display: flex;
    padding: 16px 0;
    .num {
      font-size: 30px;
      color: #fa5f5f;
      font-weight: 600;
      margin-right: 10px;
    }
    .right {
      &__top {
        font-size: 14px;
        color: #42526e;
      }
      &__bottom {
        margin-top: 10px;
        font-size: 12px;
        color: #a5adba;
      }
    }
  }
}
</style>
